在网页中引用font Awesome5.9.0

在网页中引用font Awesome5.9.0

七月 01, 2019

嵌套

1
<script src="https://kit.fontawesome.com/421a27d36a.js"></script>

将工具包代码添加到项目中

将工具包的代码复制到项目中要使用字体真棒的每个模板或页面的<head> 。不确定如何做到这一点或需要更多的指导?我们有一个示例文件,可以准确显示何处引用您的工具包。

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/421a27d36a.js"></script>
  </head>

  <body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
  </body>
</html>

将图标添加到项目的 UI

您的套件可让您访问 1,534 像素的完美图标。开始在 HTML 的<body>标记中放置图标。

然后找到正确的图标,并了解如何将其添加到您的页面.

添加一些样式

与字体真棒捆绑的支持样式使它很容易的大小,对齐,颜色,旋转,和堆叠图标.

基本用法

您可以使用样式前缀和图标名称将Font Awesome图标放置在任何位置。我们试图使图标具有特征并自然地与文本一起出现。

Font Awesome旨在与内联元素一起使用，我们建议您使用一致的HTML元素在项目中引用它们。我们喜欢<i>简洁的标签以及大多数人现在<em></em>用于强调/斜体语义文本的事实。如果那不是你的一杯茶，使用a <span>语义更正确。

您需要知道两位信息才能引用图标，1）其名称，前缀为fa-和2.您要使用的样式的相应前缀。

1
2
3
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->

fa版本5中不推荐使用 该前缀。新的默认值是fas实体样式和fab品牌样式。

  1. 1. 嵌套
  2. 2. 将工具包代码添加到项目中
  3. 3. 将图标添加到项目的 UI
  4. 4. 添加一些样式
  5. 5. 基本用法